<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <style>
        td{
            background-color: skyblue;

        }
    </style>
</head>
<body>
    <div id="app">
        <table>
            <tr v-for="(user,index) in users">
                <td>{{index+1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.gender}}</td>
                <td>{{user.age}}</td>
            </tr>
        </table>
        <hr/>
        <table>
            <tr v-for="(v,k,i) in item">
                <td>{{i}}</td>
                <td>{{k}}</td>
                <td>{{v}}</td>
            </tr>
        </table>

        <hr>
        <table>
            <tr v-for="i in 20">
                <td>{{i}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
     new Vue({
         el:"#app",
         data:{
             users:[
                 {name:"嬴政",gender:"男",age:20},
                 {name:"李白",gender:"男",age:22},
                 {name:"铁木真",gender:"男",age:40},
                 {name:"杜浦",gender:"男",age:20},
                 {name:"貂蝉",gender:"女",age:20},
                 {name:"杨玉环",gender:"女",age:26},
                 {name:"关羽",gender:"男",age:36},
                 {name:"黄月英",gender:"女",age:24},
                 {name:"花木兰",gender:"女",age:20},
                 {name:"刘邦",gender:"男",age:32}
             ],
             item:{name:"meta pro 40",price:6000}
         }
     })
</script>
</html>